const path = require('path') // 导入node.js 中专门操作路径的模块

// 导入生成预览页面的插件, 得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
    template: './src/index.html', // 指定要用到的模板文件
    filename: 'index.html' // 指定生成的文件的名称, 该文件存在于内存中, 在目录中不显示
})

const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    mode: 'development', // mode 用来指定构建模式 production
    devtool: 'eval-source-map', // 保证运行时报错的行数与源代码行数匹配, 如果设置为 'nosources-source-map' 则没有源码只有行号
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [ htmlPlugin, autoprefixer, new VueLoaderPlugin() ], // plugins 数组是 webpack 打包期间会用到的一些插件列表
    module: {
        rules: [
            { test: /\.vue$/, use: 'vue-loader' },
            // 顺序不能颠倒 必须先导入 style-loader
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            // 如果图片小于limit的数值则会将图片转换为base64,如果大于或等于则是路径, outputPath 输出路径
            { test: /\.jpg|png|gif|bmp|ttf|eot|woff|svg|woff2$/, use:'url-loader?limit=16940&outputPath=images'},
        ]
    },
    resolve: {
        alias: {
            // 告诉 webpack, @ 符号表示 src 这一层目录
            '@': path.join(__dirname, './src/')
        }
    }
}
